<template>
	<view class="dopush">
		<u-navbar
			back-text="发布"
			:background="{
				background: 'transparent'
			}"
			:border-bottom="false"
		></u-navbar>
		<view class="int">
			<u-input v-model="content" :clearable="false" :height="354" placeholder="分享你的心得..." type="textarea" :maxlength="300" :border="false" />
			<view class="remain">您还能输入{{ 300 - content.length }}字</view>
		</view>
		<view class="title u-flex u-row-between u-col-center" style="margin: 30rpx 24rpx;">
			<text>图片上传</text>
			<text>{{ imgs.length }}/9</text>
		</view>
		<view class="" style="margin: 30rpx 24rpx;"><u-upload :action="action" :file-list="fileList" max-count="9" @on-remove="onRemove" @on-success="doupland"></u-upload></view>
		<view class="btnbox">
			<u-line color="#E9E9E9"></u-line>
			<view class="btns" @click="dopush">提交</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'dopush',
	data() {
		return {
			content: '',
			action: '',
			fileList: [],
			imgs: []
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {
		// console.log(this.$u.http.config.baseUrl);
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {
		this.action = this.$u.http.config.baseUrl + '/api/upload';
	},
	//前台进入后台
	onHide() {},
	methods: {
		dopush() {
			console.log('this.imgs', this.imgs);
			let str = '';
			if (this.imgs.length > 0 && this.content !== '') {
				for (var i = 0; i < this.imgs.length; i++) {
					if (i === this.imgs.length - 1) {
						str += this.imgs[i];
					} else {
						str += this.imgs[i] + ',';
					}
				}
			} else {
				this.$refs.uToast.show({
					title: '请检查图片和心得是否填入!',
					type: 'error'
				});
				return;
			}

			this.$u.api
				.doreleasecontent({
					pic: str,
					content: this.content
				})
				.then(res => {
					console.log(res);
					this.$refs.uToast.show({
						title: '感谢您的分享!',
						type: 'success'
					});
					this.content = '';
					this.fileList = [];
					this.imgs = [];
					uni.setStorageSync('isback', true);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				})
				.catch(err => {
					console.log(err);
				});
		},
		doupland(data, index, lists, name) {
			console.log('上传成功返回', data, index, name);
			if (data.code === 200) {
				this.imgs.push(data.data.url);
			} else {
				this.$refs.uToast.show({
					title: '上传错误!',
					type: 'error'
				});
			}
		},
		onRemove(index, lists) {
			this.imgs.splice(index, 1);
			console.log(this.imgs);
			console.log(index, lists);
			console.log('图片已被移除');
		}
	}
};
</script>

<style lang="scss" scoped>
.dopush {
	background-color: #ffffff;
	min-height: 100vh;
	.int {
		margin: 20rpx 24rpx;
		position: relative;
		/deep/.u-input {
			background-color: rgba(187, 187, 187, 0.13);
		}
		.remain {
			position: absolute;
			right: 6rpx;
			bottom: 6rpx;
			font-size: 24rpx;
			color: rgba(16, 16, 16, 0.49);
		}
	}
	.btnbox {
		text-align: center;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-top: 20rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.btns {
			// width: 90%;
			margin: 0 28rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background-color: #f95d4e;
			border-radius: 40rpx;
			color: #ffffff;
		}
	}
}
</style>
